<template>
	<view class="wrap wrapElse">
		<!-- <pickerModule :picker="picker"  @change="pickerChange"></pickerModule> -->
		<picker :mode="picker.mode" :value="picker.index" @change="pickerChange($event,picker.name)" :range="picker.range"  range-key="name" :name="picker.name">
			<view class="pickerInput">
				<text v-text="picker.text"></text>
				<icon class="iconfont iconarrow-right-copy-copy"></icon>
			</view>
		</picker>
		<image src="@/static/myScoreTit.png"></image>
		<view class="list">
			<view class="studentInfo">
				<text v-text="student.name+'成绩单'"></text>
				<text v-text="student.className"></text>
				<view class="chuo">
					<image src="@/static/chuo.png"></image>
					<text v-text="student.schoolName"></text>
				</view>
			</view>
			<view class="totalScore">
				<view class="score">
					<text v-text="currentDetail.sumScore"></text>
					<text>/总分</text>
				</view>
				<!-- <view class="sort">
					<text v-text="currentDetail.sumScoreRank"></text>
					<text>/总排名</text>
				</view> -->
			</view>
			<view class="courseDetail">
				<text class="tit">基础课</text>
				<view>
					<text v-text="currentDetail.baseScore"></text>
					<text>/分数</text>
				</view>
				<!-- <view>
					<text v-text="currentDetail.baseScoreRank">1</text>
					<text>/排名</text>
				</view> -->
			</view>
			<view class="courseDetail">
				<text class="tit">专业课</text>
				<view>
					<text v-text="currentDetail.majorScore"></text>
					<text>/分数</text>
				</view>
				<!-- 				<view>
					<text v-text="currentDetail.sumScoreRank">1</text>
					<text>/排名</text>
				</view> -->
			</view>
			<navigator :url="`./courseDetail?paramsStr=${paramsStr[index]}`" class="courseScore" v-for="(item,index) in currentDetail.showVos"
			 :key="index">
				<text class="courseName" v-text="item.courseName || ''"></text>
				<view class="score">
					<text v-text="item.totalResult"></text>
					<text>分数</text>
				</view>
				<!-- <view class="sort score">
					<text v-text="item.studentRank+'/'+currentDetail.classSize"></text>
					<text>排名</text>
				</view> -->
			</navigator>
		</view>
	</view>
</template>

<script>
	import common from "@/libs/login.js";
	import userMixins from '@/libs/userMixins.js'
	import pickerModule from "@/wxcomponents/form/picker";
	export default {
		mixins: [userMixins],
		data() {
			return {
				student: '',
				picker: {
					value: "",
					index:"",
					required: false,
					mode: "selector",
					name: "termName",
					range: "",
					text: ""
				},
				currentDetail: "",
				params: {
					classCode: "",
					courseCode: "",
					studentNo: "",
					termId: ""
				},
				paramsStr: []
			};
		},
		async onLoad(option) {
			if (option.paramsStr) { // 老师查看时才会有页面入参
				this.student = JSON.parse(option.paramsStr);
				this.studentNo = this.student.number;
			} else {
				this.student = this.user;
			}
			this.getAllTerm();
		},
		methods: {
			async getAllTerm() {
				let resp = await this.$http.post({
					url: `/edu/term/page`
				});
				this.picker.range = resp.result.rows.map((item,i) => {
					if (item.isCurrentTerm == 1) {
						this.picker.text = item.termName;
						this.picker.value = item.id;
						this.picker.index = i;
					}
					return {
						name: item.termName,
						id: item.id
					};
				});
				let info = await this.$http.get({
					url: `/oa/schoolBaseInfo/detail `
				});
				this.student.schoolName = info.result.schoolName
				this.getCurrentDetail()
			},
			async getCurrentDetail() {
				let self = this;
				let caseMap = [{
						condition() { // 学生 家长
							return self.calMenuShow('学生身份')
						},
						async func() {
							let resp = await self.$http.get({
								url: `/edu/wechat/studentScore/listCourseScoreByTerm/${self.picker.value}`
							});
							self.currentDetail = resp.result
							self.params = resp.result.showVos.map(item => {
								self.paramsStr.push(JSON.stringify({
									classCode: resp.result.classCode,
									termId: item.termId,
									courseCode: item.courseCode,
									studentNo: item.studentNo
								}))
								return {
									classCode: resp.result.classCode,
									termId: item.termId,
									courseCode: item.courseCode,
									className: item.className,
									studentNo: item.studentNo
								}
							})
						}
					},
					{
						condition() { // 班主任
							return self.calMenuShow('班主任')
						},
						async func() {
							let resp = await self.$http.get({
								url: `/edu/wechat/studentScore/listCourseScoreByTerm/${self.picker.value}/${self.studentNo}`
							});
							self.currentDetail = resp.result
							self.params = resp.result.showVos.map(item => {
								self.paramsStr.push(JSON.stringify({
									classCode: resp.result.classCode,
									termId: item.termId,
									courseCode: item.courseCode,
									className: item.className,
									studentNo: item.studentNo
								}))
								return {
									classCode: resp.result.classCode,
									termId: item.termId,
									courseCode: item.courseCode,
									className: item.className,
									studentNo: item.studentNo
								}
							})
						}
					},
				]
				let findOne = caseMap.filter(item => {
					return item.condition()
				})[0]
				if (!findOne) {
					alert(`getCurrentDetail方法出错`)
				}
				findOne.func();
			},
			async getSingleDetail() {
				this.courseList.forEach(async item => {
					let resp = await this.getCourseDetail(
						item.termId,
						item.classCode,
						item.courseCode
					);
					this.courseDetailArr.push(resp.result);
					this.courseDetailArrStr.push(JSON.stringify(resp.result));
				});
			},
			pickerChange(e) {
				this.picker.value = this.picker.range[e.detail.value].id
				this.picker.index = e.detail.value
				this.picker.text = this.picker.range[e.detail.value].name
				this.getCurrentDetail()
			},

		},
		components: {
			pickerModule
		},
		watch: {
			//     "picker.value":(o,n)=>{
			// this.getCurrentDetail()
			//     }
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		background: url("") repeat-y;
		background-size: 100% auto;
	}

	.wrapElse {
		padding: 130upx 0;
		font-size: 0;
		min-height: 100%;

		image {
			width: 640upx;
			height: 69upx;
			display: block;
			margin: 0 auto;
		}
	}

	.list {
		width: 640upx;
		height: auto;
		margin: 0 auto;
		padding: 0 0 60upx 0;
		background: rgba(255, 255, 255, 1);
	}

	.courseScore {
		width: 560upx;
		height: 140upx;
		border: 1upx solid rgba(204, 204, 204, 1);
		border-radius: 8upx;
		margin: 20upx auto;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.courseName {
			font-size: 30upx;
			flex: 0 1 200upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
	}

	.score {
		display: flex;
		flex-direction: column;
		align-items: center;

		text {
			&:nth-of-type(1) {
				font-size: 40upx;
				font-family: Arial;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}

			&:nth-of-type(2) {
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
		}
	}

	.studentInfo {
		padding: 0 40upx;
		position: relative;
		margin-bottom: 40upx;

		text {
			display: block;

			&:nth-of-type(1) {
				font-size: 40upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: rgba(11, 40, 113, 1);
				margin-bottom: 20upx;
			}

			&:nth-of-type(2) {
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(118, 131, 165, 1);
			}
		}

		.chuo {
			position: absolute;
			top: 0;
			right: 0;

			image {
				width: 157upx;
				height: 100upx;
			}

			text {
				position: absolute;
				transform: rotate(-30deg);
				max-width: 80upx;
				top: 31%;
				left: 62%;
				white-space: pre-wrap;
				margin-left: -50%;
				font-size: 16upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(251, 97, 97, 1);
				line-height: 20upx;
				text-align: center;
			}
		}
	}

	.pickerInput {
		text {
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			display: block;
			width: 100%;
			text-align: center;

			&::after {
				display: inline-block;
				content: "";
				margin-left: 10upx;
				vertical-align: middle;
				width: 0;

				height: 0;

				border-width: 10upx;

				border-style: solid;

				border-color: #fff transparent transparent transparent;
			}
		}
	}

	.totalScore {
		width: 560upx;
		margin: 20upx auto 40upx auto;
		border: 1px solid rgba(11, 40, 113, 1);
		height: 100upx;
		border-radius: 8upx;

		view {
			width: 100%;
			height: 100%;
			display: inline-block;
			text-align: center;
			line-height: 100upx;

			text {
				font-family: Arial;
				font-weight: bold;

				&:nth-of-type(1) {
					font-size: 46upx;

				}

				&:nth-of-type(2) {
					font-size: 24upx;

				}
			}
		}

		.score {
			background: rgba(11, 40, 113, 1);

			text {
				color: #fff;
			}

		}

		.sort {
			background: #fff;

			text {
				color: #0B2871;
			}

		}
	}

	.courseDetail {
		width: 560upx;
		height: 160upx;
		border: 1upx solid rgba(204, 204, 204, 1);
		border-radius: 8upx;
		margin: 20upx auto;
		font-size: 0;

		.tit {
			width: 100%;
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			text-align: center;
			display: block;
			margin: 20upx 0;
		}

		view {
			width: 100%;
			display: inline-block;
			text-align: center;

			text {
				&:nth-of-type(1) {
					font-size: 46upx;
					font-family: Arial;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}

				&:nth-of-type(2) {
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
				}
			}
		}
	}
</style>
